<template>
  <div class="hotel-card" @click="handleCardClick">
    <div class="hotel-image">
      <img :src="primaryImageUrl" :alt="hotel.name">
      <div class="rating-badge">
        <el-rate 
          :model-value="hotel.overallRating || 0" 
          disabled 
          show-score 
          :score-template="formattedRating" 
        />
      </div>
    </div>

    <div class="hotel-info">
      <h3 class="hotel-name">{{ hotel.name }}</h3>
      <p class="hotel-location">
        <el-icon>
          <Location />
        </el-icon>
        {{ hotel.city }}, {{ hotel.state }}
      </p>

      <div class="hotel-features">
        <el-tag v-if="hotel.freeCancellation" type="success" size="small">免费取消</el-tag>
        <el-tag v-if="hotel.breakfastIncluded" type="warning" size="small">含早餐</el-tag>
        <el-tag v-if="hotel.swimmingPool" type="info" size="small">游泳池</el-tag>
      </div>

      <div class="hotel-price">
        <div class="price-container">
          <span class="price">{{ formattedPrice }}</span>
          <span class="price-description">每晚</span>
        </div>
        <el-button type="primary" size="small" @click.stop="viewDetails">查看详情</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Location } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  hotel: {
    type: Object,
    required: true,
    default: () => ({
      id: 0,
      name: "",
      description: "",
      address: "",
      city: "",
      state: "",
      overallRating: 0,
      reviewCount: 0,
      checkInTime: "",
      checkOutTime: "",
      createdAt: "",
      updatedAt: "",
      facilities: [],
      roomTypes: [],
      images: [],
      freeCancellation: false,
      breakfastIncluded: false
    })
  }
})

const router = useRouter()
const defaultImage = 'https://via.placeholder.com/300x200?text=No+Image'

// 计算主图URL
const primaryImageUrl = computed(() => {
  const primaryImage = props.hotel.images.find(img => img.isPrimary)
  return primaryImage?.imageUrl || 
         props.hotel.images[0]?.imageUrl || 
         defaultImage
})

// 格式化评分
const formattedRating = computed(() => {
  return (props.hotel.overallRating || 0).toFixed(1)
})

// 格式化价格
const formattedPrice = computed(() => {
  const price = props.hotel.roomTypes[0]?.basePrice || 0
  return '¥' + price.toLocaleString()
})

// 处理卡片点击
const handleCardClick = () => {
  viewDetails()
}

// 查看详情
const viewDetails = () => {
  router.push({
    name: 'hotel-detail', // 使用路由名称
    params: { id: props.hotel.id } // 传递酒店ID
  })
}
</script>

<style scoped>
/* 保持你原有的样式不变 */
.hotel-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.hotel-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.hotel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.hotel-card:hover .hotel-image img {
  transform: scale(1.05);
}

.rating-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.hotel-info {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.hotel-name {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;
  line-height: 1.5em;
}

.hotel-location {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.hotel-location .el-icon {
  margin-right: 5px;
}

.hotel-features {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hotel-price {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
}

.price-container {
  display: flex;
  flex-direction: column;
}

.price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #003580;
}

.price-description {
  font-size: 0.8rem;
  color: #999;
}

.el-button {
  margin-left: 10px;
}
</style>